<template>
<div class="page">
  <div class='nav'>
    <div class="input_view flex_ac" @click="$back() ">
      <van-icon class="ml6" name="arrow-left" size="26" color="#fff"/>
      <div class="nav_title">邀请好友</div>
    </div>
	</div>
	<div class="bbb">
		<div class="kuang1">
			<img class="img_bg" src="~@/assets/img/sharePage/kuang1.png" alt="">
			<img class="img_2wm" src="~@/assets/img/sharePage/2wm.png" alt="">

			<div class="btn_list flex_center">
				<div class="btn_i flex_ac">
					<img src="~@/assets/img/sharePage/icon1.png" alt="">
					<div>分享微信</div>
				</div>
				<div class="btn_i flex_ac">
					<img src="~@/assets/img/sharePage/icon2.png" alt="">
					<div>面对面扫码</div>
				</div>
				<div class="btn_i flex_ac">
					<img src="~@/assets/img/sharePage/icon3.png" alt="">
					<div>下载二维码</div>
				</div>
			</div>
		</div>
		
		<div class="kuang2">
			<img class="img_bg" src="~@/assets/img/sharePage/kuang2.png" alt="">
			<div class="ps">
				<div class="dian flex_ac dianl">
					<div class="dian1"></div>
					<div class="dian2"></div>
					<div class="dian3"></div>
				</div>
				说明
				<div class="dian flex_ac dianr">
					<div class="dian3"></div>
					<div class="dian2"></div>
					<div class="dian1"></div>
				</div>
			</div>

			<div class="text">
				<div>
					1.三种方式邀请好友 [分享 / 扫码 / 下载] 注册.
				</div>
				<div>
					2.被邀请人在页面分享，通过社交媒体（如微信、微博、
					QQ 等）、短信、邮件等渠道将邀请链接或邀请码分享
					给好友.
				</div>
				<div>
					3.好友响应：被邀请好友需点击邀请链接或在注册 / 登
					录页面，成功注册并完成 .
				</div>
				<div>
					4.如有任何关于活动的疑问或需要帮助，请联系活动客
					服。
				</div>
			</div>
		</div>

		<img class="bg" src="~@/assets/img/sharePage/bg.png" alt="">
		
	</div>
</div>
</template>

<script>
	export default {
		data() {
			return {
        
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
.nav{
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
  height: 40px;
	z-index: 10;
	transition: all 0.5s;
}
.input_view{
	width: 100%;
  height: 100%;
	.nav_title{
		font-weight: 500;
		font-size: 18px;
		color: #fff;
	}
}
.page{
	background: #F4F4F4;
	height: 100%;
	width: 100%;
	overflow-y: auto;
}
.bg{
	width: 100%;
	height: auto;
	display: block;
}
.bbb{
	position: relative;
	.kuang1{
		position: absolute;
		top:290px;
		left: 10px;
		width: calc(100% - 20px);
		.img_bg{
			width: 100%;
			height: auto;
		}
		.img_2wm{
			position: absolute;
			top: 58px;
			left: calc(50% - 67px);
			width: 134px;
			height: 134px;
		}
	}
	.btn_list{
		position: absolute;
		bottom: 45px;
		width: 100%;
		z-index: 10;
		.btn_i{
			margin: 0 15px;
			font-size: 13px;
			color: #FA871E;
			img{
				width: 15px;
				height: 15px;
				margin-right: 4px;
			}
		}
	}
	.kuang2{
		position: absolute;
		top:588px;
		left: 10px;
		width: calc(100% - 20px);
		.img_bg{
			width: 100%;
			height: auto;
			display: block;
		}
		.ps{
			width: 90px;
			height: 28px;
			background: #FF6B47;
			border-radius: 14px;
			border: 1px solid #FFEF98;
			font-size: 17px;
			color: #FFFBED;
			line-height: 28px;
			text-align: center;
			position: absolute;
			top: 22px;
			left: calc(50% - 45px);
		}
		.dian{
			position: absolute;
			height: 4px;
			.dian1{
				height: 2px;
				width: 2px;
				border-radius: 1px;
				background: #fff;
			}
			.dian2{
				height: 3px;
				width: 3px;
				border-radius: 1.5px;
				background: #fff;
				margin: 0 2px;
			}
			.dian3{
				height: 4px;
				width: 4px;
				border-radius: 2px;
				background: #fff;
			}
		}
		.dianl{
			left: 10px;
			top: 12px;
		}
		.dianr{
			right: 10px;
			top: 12px;
		}
		.text{
			position: absolute;
			top: 65px;
			width: 315px;
			left: calc(50% - 157.5px);
			font-size: 13px;
			color: #8D8885;
			line-height: 25px;
		}
	}
}
</style>
